<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p>
    请输入电话号码：<input type="text" id="tel">
  </p>
  <p>
    请输入电子邮箱：<input type="text" id="email">
  </p>
  <p>
    <button>验证号码是否正确</button>
  </p>

  <script>
    var tel = document.getElementById('tel')
    var email = document.getElementById('email')
    var btn = document.querySelector('button')
    var telReg = /^1[3-9]\d{9}$/
    var emailReg = 
/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
    /* 
      注意：箭头函数不建议在事件中使用，因为this指向问题

      事件源.on事件名 = 事件驱动函数
      btn.onclick = function() {

      }

      事件源.addEventListener('事件名', 事件驱动函数, 是否冒泡)
      btn.addEventListener('click', function () {

      }, true/false)
    */
    btn.addEventListener('click', function () {
      // console.log(typeof tel);

      // 通过dir查看对象的所有属性和方法
      // console.dir(tel);

      // 对象名.属性名调用对象的属性
      // console.log(typeof tel.value)

      // 验证输入的返回结果是真还是假
      // console.log(reg.test(tel.value));

      if(telReg.test(tel.value) && emailReg.test(email.value)) {
        alert('正确')
      } else {
        alert('错误')
      }
      
    })
  </script>
</body>
</html>